<template>
  <div class="page-container">
    <div class="left-side">
      <div class="user-search">
        <el-input placeholder="搜索" prefix-icon="el-icon-search" v-model="searchValue" @keyup.enter.native="reloadUserList"></el-input>
      </div>
      <div class="user-list" v-loading="userListloading">
        <div class="user-item" v-for="item in userList">
          <img class="user-img" :src="item.avatar"/>
          <div class="user-name">{{item.nickName}}</div>
        </div>
        <div class="loadMore" v-if="userHasMore" @click="getUserList">加载更多{{userHasMore}}</div>
      </div>
    </div>
    <div class="content-side">
      <div class="duty-table">
        <div class="header-row">
          <div class="header-col header-freeze">
            <div class="head-right">周次</div>
            <div class="head-left">地点</div>
          </div>
          <div class="header-col">10周</div>
          <div class="header-col">11周</div>
          <div class="header-col">12周</div>
          <div class="header-col">13周</div>
          <div class="header-col">14周</div>
          <div class="header-col">15周</div>
          <div class="header-col">16周</div>
          <div class="header-col">17周</div>
          <div class="header-col">18周</div>
          <div class="header-col">19周</div>
          <div class="header-col">20周</div>
          <div class="header-col">21周</div>
        </div>

        <div class="data-list">
          <div class="data-row">
            <div class="data-col data-head"><div class="duty-locate">致远楼1楼</div></div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
          </div>
          <div class="data-row">
            <div class="data-col data-head"><div class="duty-locate">致远楼1楼</div></div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
          </div>
          <div class="data-row">
            <div class="data-col data-head"><div class="duty-locate">致远楼1楼</div></div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
          </div>
          <div class="data-row">
            <div class="data-col data-head"><div class="duty-locate">致远楼1楼</div></div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
          </div>
          <div class="data-row">
            <div class="data-col data-head"><div class="duty-locate">致远楼1楼</div></div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
          </div>
          <div class="data-row">
            <div class="data-col data-head"><div class="duty-locate">致远楼1楼</div></div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
          </div>
          <div class="data-row">
            <div class="data-col data-head"><div class="duty-locate">致远楼1楼</div></div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
          </div>
          <div class="data-row">
            <div class="data-col data-head"><div class="duty-locate">致远楼1楼</div></div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
            <div class="data-col">
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="duty-item"><span>晴雯</span><a><i class="el-icon-close"></i></a></div>
              <div class="add-duty-item"><a><i class="el-icon-plus"></i></a><span>添加</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import { listUser } from "@/api/system/user"

    export default {
      name: "arrangeDuty",
      data(){
          return {
            searchValue:"",
            pageNum: 1,
            pageSize: 10,
            userList:[],
            userListloading:true,
            userHasMore:true,
            dutyYear:"2019",
            dutyWeeks:[],
            dutyData:[]
          }
      },
      methods:{
        getUserList(){
          this.userListloading = true;
          listUser({pageNum:this.pageNum, pageSize:this.pageSize, nickName:this.searchValue, deptId:1}).then((response) => {
            this.userList = this.userList.concat(response.rows);
            this.userListloading = false;
            if(response.rows.length < this.pageSize){
              this.userHasMore = false
            }else{
              this.userHasMore = true
              this.pageNum = this.pageNum + 1
            }
          })
        },
        reloadUserList(){
          this.pageNum = 1
          this.userList = []
          this.userHasMore = true
          this.getUserList()
        }
      },
      created() {
        this.reloadUserList()
      }
    }
</script>

<style>
  .page-container{
    display: flex;
    align-items: stretch;
    height: calc(100vh - 84px);
  }
  .left-side{
    background-color: #e9ebef;
  }
  .user-search{
    padding: 15px 10px;
    border: solid 1px #e0e0e0;
    background-color: #e9ebef;
  }
  .user-search input{
    width: 130px;
    height: 28px;
    background-color: #ced2db;
    border-radius: 2px;
  }
  .user-list{
    background-color: #e9ebef;
    overflow: auto;
    height: calc(100% - 68px);
  }
  .loadMore{
    text-align: center;
    padding: 20px 0;
  }
  .user-item{
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: solid 1px #e0e0e0;
  }
  .user-item.selected{
    background-color: #bcc1cc;
  }
  .user-item .user-img{
    width: 42px;
    height: 42px;
    background-color: #cedae9;
    border-radius: 4px;
    margin-right: 10px;
  }
  .user-item .user-name{
    font-family: MicrosoftYaHei;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #333333;
  }

  .content-side{
    height: 100%;
    flex: 1;
    overflow: hidden;
  }
  .duty-table{
    margin: 30px 30px;
    height: calc(100% - 60px);
    width: calc(100% - 60px);
    border: solid 1px #ebebeb;
    overflow:auto;
  }
  .header-row{
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .header-col{
    flex: 0 0 150px;
    background-color: #f5f7fa;
    border-right: solid 1px #ebebeb;
    border-bottom: solid 1px #ebebeb;
    display: flex;
    align-items: center;
    justify-content: center;

    font-family: MicrosoftYaHei-Bold;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
  }
  .header-col:last-child{
    border-right: none;
  }
  .header-col.header-freeze{
    display: block;
    width: 150px;
    background: linear-gradient(
      to top right,
      #f5f7fa 0%,
      #f5f7fa calc(50% - 1px),
      #ebebeb 50%,
      #f5f7fa calc(50% + 1px),
      #f5f7fa 100%
    );
    font-family: MicrosoftYaHei-Bold;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
  }
  .header-col.header-freeze .head-right{
    text-align: right;
    padding: 15px 15px 10px 0;
  }
  .header-col.header-freeze .head-left{
    text-align: left;
    padding: 10px 0 15px 15px;
  }

  .data-list{
    height: calc(100% - 82px);
    /*overflow-y: hidden;
    overflow-x: hidden;*/
  }
  .data-row{
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .data-col{
    flex: 0 0 150px;
    text-align: center;
    border-right: solid 1px #ebebeb;
    border-bottom: solid 1px #ebebeb;
    padding: 10px 20px 10px 20px;
  }
  .data-col:last-child{
    border-right: none;
  }
  .data-col.data-head{
    background-color: #f5f7fa;
    font-family: MicrosoftYaHei-Bold;
    font-size: 14px;
    font-weight: bold;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #333333;
  }
  .duty-locate{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .duty-item{
    background-color: #ecf5ff;
    border-radius: 3px;
    border: solid 1px #c5e2ff;
    padding: 10px 15px;
    margin-bottom: 10px;
  }
  .duty-item span{
    font-family: MicrosoftYaHei;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #409eff;
    margin-right: 15px;
  }
  .duty-item i[class^="el-icon-"]{
    font-family: MicrosoftYaHei;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #409eff;
  }
  .add-duty-item{
    background-color: #ffffff;
    border-radius: 3px;
    border: solid 1px #d5d5d5;
    padding: 10px 15px;
  }
  .add-duty-item span{
    font-family: MicrosoftYaHei;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #666666;
    margin-left: 15px;
  }
  .add-duty-item i[class^="el-icon-"]{
    font-family: MicrosoftYaHei;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #666666;
  }

</style>
